<template>
  <!-- <div class="page-title-box margin-b-10 flex-par">
    <div class="active-style back-btn">
      <img src="../../assets/image/icon20.png" class="back-icon" alt="">
      返回
    </div>
  </div> -->
  <div class="form-box">
    <div class="flex-par form-top">
      <div class="form-right flex-son">
        <el-form class="page-form">
          <el-form-item class="page-form-item" label="应用名称编辑">
            <el-input v-model="rpaRobotName" placeholder="请输入应用名称" />
          </el-form-item>
          <el-form-item class="page-form-item" label="开发者姓名">
            <el-input v-model="developerName" placeholder="请输入开发者姓名" />
          </el-form-item>
          <el-form-item class="page-form-item" label="应用简介编辑">
            <el-input v-model="content" :rows="4" resize="none" type="textarea" placeholder="请输入应用简介" />
          </el-form-item>
          <el-form-item class="page-form-item" label="上传附件">
            <el-upload class="file-box" :show-file-list="false" name="file" :action="uploadUrl2" accept=".ibt"
              :data="{ fileName: rpaRobotName }" :headers="headers" :onSuccess="uploadSuccess2" :onError="uploadError">
              <el-button size="small" v-if="!rpaFileAddress">点击上传文件</el-button>
              <span v-if="rpaFileAddress" class="orange-color">{{ rpaFileAddress }}</span>
            </el-upload>
          </el-form-item>
          <el-form-item class="page-form-item" label="选择标签">
            <el-cascader
              v-model="selectedBizPath"
              :options="bizOptions"
              :props="{ value: 'code', label: 'name', children: 'children', emitPath: true, checkStrictly: false }"
              placeholder="请选择业务类型/子类型"
              clearable
              :show-all-levels="true"
            />
          </el-form-item>
          <!-- 上传截图 -->
          <el-form-item class="page-form-item" label="上传截图">
            <el-upload class="upload-box" :show-file-list="false" name="pic" :action="uploadUrl1" accept=".jpg,.png"
              :headers="headers" :onSuccess="uploadSuccess" :onError="uploadError">
              <img src="../../assets/image/add-img.png" class="img-item" />
            </el-upload>
            <div class="img-item" v-for="item, index in imgList" :key="item">
              <div class="del-btn active-style" @click="deleteImg(index)">×</div>
              <img :src="serverUrl + item" class="img-item" />
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div class="form-video">
        <el-upload class="file-box" v-if="videoAddress" :show-file-list="false" name="file"
          :data="{ fileName: rpaRobotName }" :action="uploadUrl3" accept=".mp4" :headers="headers"
          :onSuccess="uploadSuccess3" :onError="uploadError">
          <el-button size="small">点击上传文件</el-button>
        </el-upload>
        <el-upload v-show="rpaRobotName" v-if="videoAddress == ''" class="upload-box text-c active-style"
          :show-file-list="false" name="file" :data="{ fileName: rpaRobotName }" :action="uploadUrl3" accept=".mp4"
          :headers="headers" :onSuccess="uploadSuccess3" :onError="uploadError">
          <img class="video-icon" src="../../assets/image/icon21.png" alt="">
          <div class="upload-txt" v-if="videoAddress == ''">上传视频</div>
          <div v-if="videoAddress" class="orange-color">{{ videoAddress }}</div>
        </el-upload>
        <video class="info-video" v-if="videoAddress" autoplay controls preload="metadata">
          <!-- 添加视频源 -->
          <source :src="serverUrl + videoAddress" type="video/mp4">
          <source :src="serverUrl + videoAddress" type="video/webm">

          <!-- 如果浏览器不支持 video 标签则显示的文字 -->
          <p>抱歉，您的浏览器不支持 HTML5 视频播放。</p>
        </video>
        <div v-show="!rpaRobotName" style="text-align: center;font-size: 30px;">请先输入应用名称</div>
      </div>
    </div>
    <div class="form-bottom">
      <div class="info-header">内容编辑</div>
      <div class="editor-box">
        <toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
          :mode="mode" />
        <editor style="height: 500px; overflow-y: hidden;" v-model="richContent" :defaultConfig="editorConfig"
          :mode="mode" @onCreated="handleCreated" />
      </div>
    </div>
    <div class="op-sticky-bar">
      <div class="op-sticky-inner">
        <div class="op-left-tips">请完善必要信息后再发布；可先保存为草稿</div>
        <div class="op-actions">
          <el-button size="large" @click="saveDraft" :loading="savingDraft">保存草稿</el-button>
          <el-button class="blue-bk" size="large" type="primary" @click="publishSubmit" :loading="publishing">发布</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import '@wangeditor/editor/dist/css/style.css'
import { onBeforeUnmount, onMounted, reactive, ref, shallowRef } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { useRoute, useRouter } from 'vue-router'

import { ElMessage } from 'element-plus'
import {
  serverUrl, removeIbtFun, removeImgFun, saveRpacontroller, getRpaInfo, bizTypeMenu
} from '@/assets/api/api.js';
export default {
  components: { Editor, Toolbar },
  setup() {
    const route = useRoute()
    const router = useRouter()
    console.log(route.query)
    const pageId = ref(route.query.id || 0)
    // 文件上传
    const uploadUrl1 = ref(serverUrl + "/rpaFileUpload/uploadScreenShot")//截图
    const uploadUrl2 = ref(serverUrl + "/rpaFileUpload/upload")//ibt文件
    const uploadUrl3 = ref(serverUrl + "/rpaFileUpload/uploadVideo")//视频文件
    const headers = reactive({
      'Access-Control-Allow-Origin': '*',
      Accept: 'application/json; charset=utf-8',
    })
    // el-upload 不走全局 axios 拦截器，这里手动附带 token
    headers.Authorization = localStorage.getItem('token') || ''

    // 表单
    let rpaRobotName = ref('');
    let version = ref('');
    let developerName = ref('');
    let imgList = ref([]);//截图数组
    let typeMenuList = ref([]);//业务类型
    let screenShotAddress = ref('');//截图
    let rpaFileAddress = ref('');//ibt
    let videoAddress = ref('');//视频
    let content = ref('');
    let richContent = ref('')
    const savingDraft = ref(false)
    const publishing = ref(false)
    // 业务类型级联（单选到叶子）
    let selectedBizPath = ref([]) // [bizTypeCode, subBizTypeCode]
    let bizOptions = ref([])
    // 编辑器实例，必须用 shallowRef
    const editorRef = shallowRef()

    // 工具栏配置
    const toolbarConfig = ref({
      // 配置工具栏显示哪些功能
      toolbarKeys: [
        'headerSelect', // 标题
        'bold', 'italic', 'through', 'underline', // 加粗、斜体、删除线、下划线
        'color', 'bgColor', // 文字颜色、背景色
        'fontSize', 'fontFamily', // 字体大小、字体
        'lineHeight', // 行高
        'bulletedList', 'numberedList', // 无序列表、有序列表
        'todo', // 待办
        'justifyLeft', 'justifyCenter', 'justifyRight', 'justifyJustify', // 对齐方式
        'divider', // 分割线
        'insertLink', // 插入链接
        // 'insertImage', // 插入图片
        // 'insertVideo', // 插入视频
        'insertTable', // 插入表格
        'codeBlock', // 代码块
        'blockquote', // 引用
        'undo', 'redo' // 撤销、重做
      ],
      // 其他配置...
    })
    const editorConfig = { placeholder: '请输入内容...' }

    onMounted(() => {
      // 加载业务类型树（优先走数据库树，其次回退常量菜单）
      loadBizTypeTree()
      if (pageId.value) {
        getItemInfo()
      }
    })
    const loadBizTypeTree = () => {
      // 优先使用管理员树接口；若失败则回退常量菜单
      import('@/assets/api/api.js').then(api => {
        api.getBizTypeTree().then(res => {
          if (res.code === 0 && Array.isArray(res.data)) {
            bizOptions.value = (res.data || []).map(n => ({
              code: n.typeCode,
              name: n.typeName,
              children: (n.children || []).map(c => ({ code: c.typeCode, name: c.typeName }))
            }))
          } else {
            // 回退
            fallbackLoadMenu()
          }
        }).catch(() => fallbackLoadMenu())
      })
    }
    const fallbackLoadMenu = () => {
      import('@/assets/api/api.js').then(api => {
        api.bizTypeMenu().then(res => {
          const children = res?.data?.children || []
          bizOptions.value = children.map(n => ({
            code: n.webMenuId,
            name: n.menuName,
            children: (n.children || []).map(c => ({ code: c.webMenuId, name: c.menuName }))
          }))
        }).catch(() => { bizOptions.value = [] })
      })
    }
    // 详情
    const getItemInfo = () => {
      getRpaInfo({ id: pageId.value })
        .then((res) => {
          console.log(res.data)
          if (res.code == 0) {
            rpaRobotName.value = res.data.rpaRobotName
            content.value = res.data.content
            developerName.value = res.data.developerName
            rpaFileAddress.value = res.data.rpaFileAddress
            // 回显级联路径
            if (res.data.bizType && res.data.subBizType) {
              selectedBizPath.value = [res.data.bizType, res.data.subBizType]
            } else {
              selectedBizPath.value = []
            }
            videoAddress.value = res.data.videoAddress
            richContent.value = res.data.richContent || ''
            imgList.value = res.data.screenShotAddress.split(',')
          }
        })
        .catch((err) => { });
    }
    // 提交
    const publishSubmit = () => {
      if (publishing.value) return
      publishing.value = true
      if (rpaRobotName.value == '') {
        ElMessage.error('请输入应用名称')
        publishing.value = false
        return
      }
      if (developerName.value == '') {
        ElMessage.error('请输入开发者姓名')
        publishing.value = false
        return
      }
      if (content.value == '') {
        ElMessage.error('请输入应用简介')
        publishing.value = false
        return
      }
      if (rpaFileAddress.value == '') {
        ElMessage.error('请上传附件')
        publishing.value = false
        return
      }
      if (!Array.isArray(selectedBizPath.value) || selectedBizPath.value.length !== 2) {
        ElMessage.error('请选择标签（业务类型/子类型）')
        publishing.value = false
        return
      }
      if (imgList.value.length == 0) {
        ElMessage.error('请上传截图')
        publishing.value = false
        return
      }

      if (videoAddress.value == '') {
        ElMessage.error('请上传视频')
        publishing.value = false
        return
      }
      if (richContent.value == '') {
        ElMessage.error('请编辑内容')
        publishing.value = false
        return
      }
      const [bizTypeCode, subBizTypeCode] = selectedBizPath.value
      saveRpacontroller(pageId.value, {
        rpaRobotName: rpaRobotName.value,
        content: content.value,
        developerName: developerName.value,
        rpaFileAddress: rpaFileAddress.value,
        bizType: bizTypeCode,
        subBizType: subBizTypeCode,
        screenShotAddress: imgList.value.toString(),
        videoAddress: videoAddress.value,
        richContent: richContent.value,
      })
         .then((res) => {
           if (res.code == 0) {
             ElMessage.success('发布成功')
             // 跳转到应用详情页
             setTimeout(() => {
               router.push(`/yingyongDetail/${pageId.value || res.data?.id}`)
             }, 1000);
           }
           publishing.value = false
         })
        .catch((err) => { publishing.value = false });
    }
    // 草稿：仅校验名称（必要最低限度），可选带上已填字段
    const saveDraft = () => {
      if (savingDraft.value) return
      if (rpaRobotName.value == '') {
        ElMessage.error('请输入应用名称')
        return
      }
      savingDraft.value = true
      const payload = {
        rpaRobotName: rpaRobotName.value,
        developerName: developerName.value || undefined,
        content: content.value || undefined,
        rpaFileAddress: rpaFileAddress.value || undefined,
        screenShotAddress: imgList.value.length ? imgList.value.toString() : undefined,
        videoAddress: videoAddress.value || undefined,
        richContent: richContent.value || undefined,
      }
      if (Array.isArray(selectedBizPath.value) && selectedBizPath.value.length === 2) {
        payload.bizType = selectedBizPath.value[0]
        payload.subBizType = selectedBizPath.value[1]
      }
      saveRpacontroller(pageId.value, payload)
        .then((res) => {
          if (res.code == 0) {
            ElMessage.success('草稿已保存')
          }
          savingDraft.value = false
        })
        .catch(() => { savingDraft.value = false })
    }
    // 截图
    const uploadSuccess = (e) => {
      console.log(e)
      // 兼容后端返回格式：1) 直接返回字符串路径；2) 返回对象含 path；3) {code, message, data}
      if (!e) {
        ElMessage.error('上传失败：服务端未返回数据')
        return
      }
      if (e && typeof e === 'object' && typeof e.code !== 'undefined') {
        if (e.code !== 0) {
          ElMessage.error(e.message || '上传失败')
          return
        }
        const val = e.data?.path || e.data || e.path
        if (val) {
          imgList.value.push(val)
        } else {
          ElMessage.error('上传失败：未获取到文件路径')
        }
        return
      }
      const val = e?.path || e
      if (val) {
        imgList.value.push(val)
      } else {
        ElMessage.error('上传失败：未获取到文件路径')
      }
    }
    // ibt
    const uploadSuccess2 = (e) => {
      console.log('uploadSuccess2----')
      console.log(e)
      if (!e) {
        ElMessage.error('上传失败：服务端未返回数据')
        return
      }
      if (e && typeof e === 'object' && typeof e.code !== 'undefined') {
        if (e.code !== 0) {
          ElMessage.error(e.message || '上传失败')
          return
        }
        const val = e.data?.path || e.data || e.path || ''
        if (val) {
          rpaFileAddress.value = val
        } else {
          ElMessage.error('上传失败：未获取到文件路径')
        }
        console.log(rpaFileAddress.value)
        return
      }
      const val = e?.path || e || ''
      if (val) {
        rpaFileAddress.value = val
      } else {
        ElMessage.error('上传失败：未获取到文件路径')
      }
      console.log(rpaFileAddress.value)
    }
    // 视频
    const uploadSuccess3 = (e) => {
      console.log(e)
      if (!e) {
        ElMessage.error('上传失败：服务端未返回数据')
        return
      }
      if (e && typeof e === 'object' && typeof e.code !== 'undefined') {
        if (e.code !== 0) {
          ElMessage.error(e.message || '上传失败')
          return
        }
        const val = e.data?.path || e.data || e.path || ''
        if (val) {
          videoAddress.value = val
        } else {
          ElMessage.error('上传失败：未获取到文件路径')
        }
        return
      }
      const val = e?.path || e || ''
      if (val) {
        videoAddress.value = val
      } else {
        ElMessage.error('上传失败：未获取到文件路径')
      }
    }
    // 删除截图
    const deleteImg = (index) => {

      // removeImgFun(imgList[index])
      //   .then((res) => {
      //     if (res.code == 0) {
      imgList.value.splice(index, 1)
      //   }
      // })
      // .catch((err) => { });
    }
    const uploadError = (e) => {
      console.log('uploadError', e)
      let message = '上传失败，请稍后重试'
      // Element Plus Upload onError 第一个参数为 Error 类型，可能带有 response
      if (e && e.message) {
        message = e.message
      }
      // 部分情况下可通过 e.response 取到服务端响应
      const resp = e?.response || e?.target?.response || null
      try {
        if (resp && typeof resp === 'string') {
          const json = JSON.parse(resp)
          message = json.message || json.msg || message
        } else if (resp && typeof resp === 'object') {
          const data = resp.data || resp
          if (typeof data === 'string') {
            message = data
          } else if (data && typeof data === 'object') {
            message = data.message || data.msg || message
          }
        }
      } catch (_) { }
      ElMessage.error(message)
    }
    // 组件销毁时，也及时销毁编辑器
    onBeforeUnmount(() => {
      const editor = editorRef.value
      if (editor == null) return
      editor.destroy()
    })

    const handleCreated = (editor) => {
      editorRef.value = editor
    }

    return {
      // 上传文件
      serverUrl,
      uploadUrl1,
      uploadUrl2,
      uploadUrl3,
      // 表单
      rpaRobotName,
      rpaFileAddress,
      videoAddress,
      richContent,
      selectedBizPath,
      bizOptions,
      developerName,
      content,
      headers,
      pageId,
      // 其他变量
      imgList,
      editorRef,
      mode: 'default', // 或 'simple'
      toolbarConfig,
      editorConfig,
      getItemInfo,
      deleteImg,
      handleCreated,
      uploadSuccess,
      uploadSuccess2,
      uploadSuccess3,
      uploadError,
      saveDraft,
      publishSubmit
    }
  }
} 
</script>
<style scoped>
.layout {
  height: 100%;
}

.layout-content {
  height: 100%;
  width: 100%;
  background: white;
}

.content-box {
  height: calc(100% - 70px);
  width: 100%;
  background: #f8f8f8;
}

.contentLeft {
  background-color: rgba(0, 21, 42, 1);
}

.el-sub-menu /deep/ .el-menu {
  background-color: rgba(0, 21, 42, 1);
}

.contentLeft .el-sub-menu .el-menu li {
  width: 100%;
  box-sizing: inherit;
  background: rgba(0, 21, 42, 1);
}

.contentLeft /deep/ .el-menu-item,
.contentLeft /deep/ .el-sub-menu__title {
  height: 40px;
  line-height: 40px;
  color: white;
  border-radius: 40px;
  font-size: 14px;
}

.contentLeft /deep/ .el-sub-menu__title:hover {
  background: rgba(53, 107, 226, 1) !important;
  border-radius: 40px;
}

.contentLeft /deep/ .el-menu-item:hover {
  background: rgba(53, 107, 226, 1) !important;
  border-radius: 40px;
}

.contentLeft /deep/ .el-menu-item.is-active {
  background-color: rgba(53, 107, 226, 1) !important;
  border-radius: 40px;
}

.yingyong-page {
  height: 100%;
  flex: 1;
  overflow: auto;
  background-color: #F1F9FE;
}

.page-title-box {
  height: 60px;
  line-height: 60px;
  color: #00152A;
  font-size: 18px;
  font-weight: 600;
  background-color: white;
}

.back-btn {
  color: gray;
  border: 1px solid gray;
  height: 36px;
  line-height: 36px;
  padding: 0 15px;
  border-radius: 5px;
  margin: 10px;
}

.back-icon {
  width: 25px;
  height: 25px;
  position: relative;
  top: 5px;
}

/* 优化表单样式 */
.form-box {
  background-color: white;
  margin: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 123, 255, 0.1);
}

.form-top {
  border-bottom: 1px solid rgba(0, 123, 255, 0.1);
  padding: 20px;
}

.form-video {
  width: 700px;
  border: 1px solid rgba(215, 215, 215, 1);
  margin: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(0, 123, 255, 0.02) 0%, rgba(0, 198, 255, 0.02) 100%);
}

.video-icon {
  width: 180px;
  height: 180px;
}

.upload-box /deep/ .el-upload {
  display: block;
  margin: 0 auto;
}

.upload-txt {
  font-weight: 700;
  font-size: 30px;
  color: #AAAAAA;
}

 .page-form {
   /* 表单容器样式 */
 }

/* 优化表单项样式 */
.page-form-item {
  background: rgba(40, 127, 230, .08);
  border-radius: 8px;
  padding: 15px;
  margin: 10px 10px 0 0;
  display: block;
  border: 1px solid rgba(0, 123, 255, 0.1);
  transition: all 0.3s ease;
}

.page-form-item:hover {
  background: rgba(40, 127, 230, .12);
  border-color: rgba(0, 123, 255, 0.2);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.1);
}

.page-form-item:last-child {
  margin-bottom: 10px;
}

.page-form-item /deep/ .el-form-item__label {
  color: #333;
  font-weight: 600;
  font-size: 14px;
}

/* 优化输入框样式 */
.page-form-item /deep/ .el-input__wrapper {
  border-radius: 6px;
  border: 1px solid rgba(0, 123, 255, 0.2);
  transition: all 0.3s ease;
}

.page-form-item /deep/ .el-input__wrapper:hover {
  border-color: rgba(0, 123, 255, 0.4);
}

.page-form-item /deep/ .el-input__wrapper.is-focus {
  border-color: #007BFF;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
}

/* 优化按钮样式 */
.page-form-item /deep/ .el-button {
  border-radius: 6px;
  transition: all 0.3s ease;
}

.page-form-item /deep/ .el-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2);
}

 .list-radio-box {
   /* 单选按钮组样式 */
 }

.list-radio-box /deep/ .el-radio {
  color: rgba(0, 72, 143, 1);
  height: 30px;
  padding: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
}

.list-radio-box /deep/ .el-radio__label {
  padding-left: 0;
  font-weight: 900;
  font-size: 14px !important;
}

.list-radio-box /deep/ .el-radio.is-bordered.el-radio--small .el-radio__inner {
  display: none;
}

.list-radio-box /deep/ .el-radio.is-bordered {
  border: 1px solid rgba(0, 72, 143, 1);
  background-color: white;
}

.list-radio-box /deep/ .el-radio.is-bordered.is-checked {
  background-color: rgba(0, 72, 143, 1);
}

.list-radio-box /deep/ .el-radio__input.is-checked+.el-radio__label {
  color: white;
}

.info-header {
  font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
  font-weight: 700;
  font-size: 22px;
  color: #000000;
  line-height: 30px;
  position: relative;
  padding: 16px;
}

.info-header:after {
  content: "";
  position: absolute;
  left: 0px;
  top: 18px;
  width: 6px;
  height: 26px;
  background-color: rgba(0, 72, 143, 1);
  border-radius: 5px;
}

.form-bottom {
  padding: 20px;
  background: linear-gradient(135deg, rgba(0, 123, 255, 0.02) 0%, rgba(0, 198, 255, 0.02) 100%);
}

/* 优化编辑器样式 */
.editor-box {
  border: 1px solid rgba(0, 123, 255, 0.2);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 123, 255, 0.1);
}

.info-video {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
}

/* 优化图片样式 */
.img-item {
  width: 80px;
  height: 80px;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin: 0 10px 10px 0;
  position: relative;
  transition: all 0.3s ease;
}

.img-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2);
  border-color: rgba(0, 123, 255, 0.4);
}

.img-item img {
  width: 100%;
  height: 100%;
  border-radius: 6px;
}

.img-item .del-btn {
  position: absolute;
  z-index: 10;
  color: white;
  background: rgba(255, 71, 87, 0.9);
  font-size: 16px;
  width: 20px;
  height: 20px;
  line-height: 18px;
  text-align: center;
  border-radius: 50%;
  right: -5px;
  top: -5px;
  transition: all 0.3s ease;
}

.img-item .del-btn:hover {
  background: #ff4757;
  transform: scale(1.1);
}

/* 优化操作栏样式 */
.op-sticky-bar {
  position: sticky;
  bottom: 0;
  background: rgba(255,255,255,0.95);
  backdrop-filter: saturate(180%) blur(6px);
  border-top: 1px solid rgba(0, 123, 255, 0.1);
  padding: 16px 0;
  margin-top: 8px;
}

.op-sticky-inner { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  padding: 0 20px; 
}

.op-left-tips { 
  color: #666; 
  font-size: 14px; 
}

.op-actions .el-button + .el-button { 
  margin-left: 16px; 
}

.op-actions .el-button { 
  min-width: 120px; 
  font-weight: 600;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.op-actions .el-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2);
}

.blue-bk {
  background: linear-gradient(135deg, #007BFF 0%, #0056D2 100%) !important;
  border: none !important;
}

.blue-bk:hover {
  background: linear-gradient(135deg, #00C6FF 0%, #007BFF 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 123, 255, 0.3);
}
</style>